<template>
    <div class="box-view screen-all flex">
        <p>
            {{ list2.map(m => m.name).join('&') }}
        </p>

    </div>
</template>

<script lang="ts">
import { ref, Ref, reactive, toRefs, onMounted, defineComponent } from 'vue';

export default defineComponent({
    components: {
        
    },

    setup () {

        interface typeParamsObj {
            [key: string]: string | number,
        }; 

        const data = reactive({
            list1: [
                { id: 1, name: '叶兰' },
                { id: 2, name: '宵宫' },
                { id: 3, name: '行秋' },
            ],
            list2: [
                { id: 1, name: '叶兰', age: 20 },
                { id: 2, name: '宵宫', age: 16 },
                { id: 3, name: '行秋', age: 18 },
                { id: 4, name: '钟离', age: 22 },
            ],

            pageOpt: {
                page: 1,
                page_size: 10,
            },
            queryObj: {
                keyword: '钟离',
            },
        })

        const post = (url: string, params: any): Promise<any> => {
            console.log(url, params);
            return new Promise((resolve, reject)=>{
                setTimeout(() => {
                    resolve({ status: 1, msg: 'success', data: { id: 4, name: '钟离', age: 22 } });
                }, 500);
            });
        }

        const func = function (type:number = 1, ...params: any) {
            console.log('不定参=', type, params);
            console.log('arguments=', JSON.stringify(arguments));
        }

        
        onMounted(() => {
            

            // let _list1 = data.list1.map(m => m.name);
            // console.log(_list1);

            // let _list2 = data.list2.filter(m => m.age >= 18).map(m => m.name);
            // console.log(_list2);


            // let _id = data.list2.find(m => m.name == '钟离')?.id;
            // console.log(_id);


            // let _bool = data.list2.some(m => m.id == 3);
            // console.log(_bool);


            // let params1 = Object.assign({}, data.pageOpt, data.queryObj);
            // console.log(params1);


            // let params2 = {
            //     ...data.pageOpt,
            //     ...data.queryObj,

            //     page_size: 20,
            // };
            // console.log(params2);

            // post('/getName', params1)
            //     .then(({ status, msg, data }) => {
            //         console.log(status, msg, data);
            //     }).catch(() => {

            //     });      
            

            // let paramsObj: typeParamsObj = {
            //     token: 'zb08ty873m1',
            //     keyword: '',
            //     type: 0,
            //     name: '钟离',
            //     pid: 12
            // }

            // Object.keys(paramsObj).forEach(key => !paramsObj[key] && paramsObj[key] !== 0 && delete paramsObj[key]);

            // console.log(paramsObj);

            func(1);
            func(1, 2, 3, 4);
            // func(1, 2, 3, 4, 5, 6);
        })

        return {
            ...toRefs(data),
        }
    },
});
</script>
<style lang="scss" scoped>
    .box-view {
        background-color: white;
        font-size: 20px;
        color: #121212;
    }
</style>
